<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue实例的属性和方法</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		{{msg}}
	
		<h2 ref="hello">你好</h2>
		<p ref="world">世界</p>
		<hr>

		<h1 ref="title">标题：{{name}}</h1>
	</div>

	<script>
		/*var vm=new Vue({
			// el:'#itany',
			data:{
				msg:'welcome to itany'
			},
			name:'tom',
			age:24,
			show:function(){
				console.log('show');
			}
		});*/

		/**
		 * 属性
		 */
		//vm.属性名 获取data中的属性
		// console.log(vm.msg);

		//vm.$el 获取vue实例关联的元素
		// console.log(vm.$el); //DOM对象
		// vm.$el.style.color='red';

		//vm.$data //获取数据对象data
		// console.log(vm.$data);
		// console.log(vm.$data.msg);

		//vm.$options //获取自定义属性
		// console.log(vm.$options.name);
		// console.log(vm.$options.age);
		// vm.$options.show();

		//vm.$refs 获取所有添加ref属性的元素
		// console.log(vm.$refs);
		// console.log(vm.$refs.hello); //DOM对象
		// vm.$refs.hello.style.color='blue';


		/**
		 * 方法
		 */
		//vm.$mount()  手动挂载vue实例
		// vm.$mount('#itany');
		var vm=new Vue({
			data:{
				msg:'欢迎来到南京网博',
				name:'tom'
			}
		}).$mount('#itany');

		//vm.$destroy() 销毁实例
		// vm.$destroy();

		// vm.$nextTick(callback) 在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM
		//修改数据
		vm.name='汤姆';
		//DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
		// console.log(vm.$refs.title.textContent);
		vm.$nextTick(function(){
			//DOM更新完成，更新完成后再执行此代码
			console.log(vm.$refs.title.textContent);
		});
	</script>
	
</body>
</html>